<template>
  <div class="login-center-container">
    <div class="h-inner">
      <div class="login-center-header-mask">
        <div class="avatarImg"></div>
        <div class="user-info">
          <div class="user-info-top">
            <span
              id="h-name"
              style="font-size: 18px; color: #fff; font-weight: 700"
              >Z-哲</span
            >
            <div><img src="./images/female.png" alt="" /></div>
            <span id="h-gender" class="icon gender male"></span
            ><svg
              t="1641540753102"
              viewBox="0 0 1901 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2673"
              width="20"
              height="20"
              class="icon"
            >
              <path
                d="M146.285714 170.349714h1609.142857V877.714286H146.285714z"
                fill="#FFFFFF"
                p-id="2674"
              ></path>
              <path
                d="M1763.766857 73.142857c24.868571 0 44.544 18.285714 43.593143 49.444572v747.52a48.859429 48.859429 0 0 1-49.737143 49.298285H122.88a48.859429 48.859429 0 0 1-49.737143-49.371428V208.969143c0-24.649143 18.651429-49.371429 49.737143-49.371429H1148.342857v-37.010285c0-24.722286 18.651429-49.444571 49.737143-49.444572h565.613714zM265.801143 264.630857h-49.737143c-18.578286 0-37.302857 18.578286-37.302857 37.010286v488.082286c0 18.578286 18.724571 37.010286 37.302857 37.010285h298.422857c18.651429 0 37.302857-18.432 37.302857-37.010285v-49.371429c0-18.651429-18.651429-37.156571-37.302857-37.156571h-211.382857v-401.554286c0-18.432-18.651429-37.010286-37.302857-37.010286z m447.634286 0h-49.737143c-18.651429 0-37.302857 18.578286-37.302857 37.010286v302.811428c-0.365714 12.653714 0 30.427429 6.217142 36.937143l174.08 172.982857c6.875429 6.875429 19.529143 9.947429 29.403429 11.264l10.020571 0.950858h8.045715l10.020571-0.950858c9.874286-1.316571 22.601143-4.388571 29.476572-11.264l174.08-172.982857c6.144-6.070857 18.578286-18.432 18.578285-30.866285V307.931429c0-18.505143-18.651429-37.083429-37.302857-37.083429h-49.590857c-18.724571 0-37.376 18.578286-37.376 37.083429V585.874286l-105.691429 104.96-105.618285-104.96V301.641143c0-18.432-18.651429-37.010286-37.302857-37.010286zM1658.148571 178.102857h-354.304a49.005714 49.005714 0 0 0-49.737142 49.444572v543.670857c0 24.649143 18.651429 49.371429 49.737142 49.371428h354.304c24.868571 0 49.737143-18.505143 49.737143-49.371428V227.474286a48.932571 48.932571 0 0 0-49.737143-49.444572zM1552.457143 295.497143c16.603429 0 33.206857 14.628571 36.717714 30.866286l0.658286 6.144v333.677714c0 16.457143-14.774857 32.914286-31.158857 36.352l-6.217143 0.658286h-142.921143c-16.603429 0-33.133714-14.628571-36.571429-30.866286l-0.731428-6.144V332.580571c0-16.457143 14.701714-32.914286 31.085714-36.352l6.217143-0.658285h142.921143z"
                fill="#C0C0C0"
                p-id="2675"
                class="bg"
              ></path>
            </svg>
            <div
              class="h-vipType disable"
              style="
                background-color: #ccd0d7;
                color: #99a2aa;
                border-radius: 5px;
              "
            >
              大会员
            </div>
            <div class="space-fans-medal">
              <!---->
              <div class="normal-medal">
                <div class="normal-left">+</div>
                <div class="normal-right"><p>粉丝勋章</p></div>
              </div>
            </div>
          </div>
          <div class="h-basic-spacing">
            <h4
              @click="isShow = false"
              v-if="isShow"
              title="从黎明到黄昏，阳光充足，胜过一切过去的诗"
              class="h-sign"
              style="color: #fff"
            >
              {{ content }}
            </h4>
            <input
              v-else
              style="color: #999"
              id="h-sign"
              type="text"
              placeholder="编辑个性签名"
              maxlength="60"
              class="space_input"
              v-model="content"
              @focusout="isShow = true"
              ref="signInput"
            />
          </div>
        </div>
      </div>
    </div>
    <div ref="navRef" class="nav">
      <ul class="ul-left">
        <li>
          <svg
            t="1668242282312"
            class="icon"
            viewBox="0 0 1029 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6666"
            width="30"
            height="30"
          >
            <path
              d="M1001.423238 494.592q21.504 20.48 22.528 45.056t-16.384 40.96q-19.456 17.408-45.056 16.384t-40.96-14.336q-5.12-4.096-31.232-28.672t-62.464-58.88-77.824-73.728-78.336-74.24-63.488-60.416-33.792-31.744q-32.768-29.696-64.512-28.672t-62.464 28.672q-10.24 9.216-38.4 35.328t-65.024 60.928-77.824 72.704-75.776 70.656-59.904 55.808-30.208 27.136q-15.36 12.288-40.96 13.312t-44.032-15.36q-20.48-18.432-19.456-44.544t17.408-41.472q6.144-6.144 37.888-35.84t75.776-70.656 94.72-88.064 94.208-88.064 74.752-70.144 36.352-34.304q38.912-37.888 83.968-38.4t76.8 30.208q6.144 5.12 25.6 24.064t47.616 46.08 62.976 60.928 70.656 68.096 70.144 68.096 62.976 60.928 48.128 46.592zM447.439238 346.112q25.6-23.552 61.44-25.088t64.512 25.088q3.072 3.072 18.432 17.408l38.912 35.84q22.528 21.504 50.688 48.128t57.856 53.248q68.608 63.488 153.6 142.336l0 194.56q0 22.528-16.896 39.936t-45.568 18.432l-193.536 0 0-158.72q0-33.792-31.744-33.792l-195.584 0q-17.408 0-24.064 10.24t-6.656 23.552q0 6.144-0.512 31.232t-0.512 53.76l0 73.728-187.392 0q-29.696 0-47.104-13.312t-17.408-37.888l0-203.776q83.968-76.8 152.576-139.264 28.672-26.624 57.344-52.736t52.224-47.616 39.424-36.352 19.968-18.944z"
              p-id="6667"
              fill="#1296db"
            ></path></svg
          >主页
        </li>
        <li>
          <svg
            t="1668242076923"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2937"
            width="30"
            height="30"
          >
            <path
              d="M895.59 361.88c-21.68-44.77-87.92-117.09-224.18-69.13-1.7-41-17.3-86.78-57.37-135.06-38.45-37.43-84.54-51.21-134.46-44.33-49.28 6.78-138.53 47.44-135 191.84-39.51-11-87.87-10.35-146.17 12.83-47.48 25-74.82 64.58-83.71 114.18-8.78 49 2.3 146.41 140.73 187.7-22.72 34.17-37 80.38-33 143 9.11 52.88 38.3 91.11 82.73 114.89 43.85 23.48 140 43.06 222-75.83 25.48 32.16 65 60 125.8 75.54 53.11 7.68 98.49-8.27 134.84-43.17 35.88-34.46 84.19-119.81-3.53-234.57 38.46-14.29 77.18-43.28 110.72-96.3 23.71-48.15 22.57-96.23 0.6-141.59z"
              fill="#d81e06"
              p-id="2938"
            ></path>
            <path
              d="M604.29 385.34a13 13 0 0 0-18 3.91L511.55 505.6 424.39 399a13 13 0 0 0-18.31-1.84l-1.26 1a13 13 0 0 0-1.82 18.39l87.53 107.05-128.27 50a13 13 0 0 0-7.41 16.85l0.59 1.52a13 13 0 0 0 16.85 7.4l128.87-50.18 7.84 137.4a13 13 0 0 0 13.74 12.25l1.63-0.1A13 13 0 0 0 536.65 685l-7.91-138.06 133.14 35a13 13 0 0 0 15.9-9.28l0.41-1.57a13 13 0 0 0-9.28-15.9L535.16 520l74.41-115.82a13 13 0 0 0-3.91-18z"
              fill="#d81e06"
              p-id="2939"
            ></path>
            <path
              d="M588 491.27c-4.14-8.55-16.79-22.36-42.8-13.2-0.33-7.83-3.3-16.57-11-25.79a29.58 29.58 0 0 0-25.67-8.46c-9.41 1.29-26.45 9.06-25.78 36.62-7.55-2.1-16.78-2-27.91 2.45a29.59 29.59 0 0 0-16 21.8c-1.68 9.35 0.44 27.95 26.87 35.84-4.34 6.52-7.07 15.34-6.3 27.29a29.57 29.57 0 0 0 15.79 21.94c8.38 4.48 26.73 8.22 42.39-14.48 4.86 6.14 12.41 11.46 24 14.42a29.55 29.55 0 0 0 25.75-8.24c6.85-6.58 16.07-22.87-0.68-44.78 7.35-2.73 14.74-8.26 21.14-18.39a29.54 29.54 0 0 0 0.2-27.02z"
              fill="#d81e06"
              p-id="2940"
            ></path>
            <path
              d="M489 594a30.86 30.86 0 0 1-14.09-3.46A30.27 30.27 0 0 1 458.64 568c-0.69-10.59 1.26-19.63 5.79-27-29.61-9.39-27.17-32-26.37-36.48a30.27 30.27 0 0 1 16.45-22.42c9.85-3.93 19-4.86 27.41-2.82-0.2-31.07 22-35.73 26.55-36.35a30.39 30.39 0 0 1 26.41 8.7c6.78 8.16 10.51 16.62 11.14 25.22 29.5-9.81 40.8 9.91 42.78 14a30.28 30.28 0 0 1-0.11 27.8c-5.66 9-12.55 15.13-20.54 18.4 18.44 25 3.18 41.86-0.1 45a30.29 30.29 0 0 1-26.48 8.47c-10.29-2.62-18.28-7.27-23.84-13.84C507.89 590.47 497.27 594 489 594z m-16-114a48.15 48.15 0 0 0-17.77 3.71 28.57 28.57 0 0 0-15.45 21.13c-0.77 4.29-3.1 26.1 26.25 34.85l1.14 0.33-0.65 1c-4.77 7.16-6.83 16.17-6.15 26.76A28.52 28.52 0 0 0 475.71 589c3.84 2.06 23.84 11 41.24-14.2l0.68-1 0.73 0.92c5.34 6.75 13.27 11.49 23.55 14.12a28.51 28.51 0 0 0 24.92-8c3.14-3 17.84-19.27-0.77-43.61l-0.71-1 1.11-0.41c8.07-3 15-9.07 20.7-18a28.62 28.62 0 0 0 0.07-26.18c-1.9-3.91-12.83-22.93-41.72-12.75l-1.12 0.4v-1.18c-0.36-8.61-4-17.11-10.75-25.27a28.44 28.44 0 0 0-24.87-8.15c-4.31 0.59-25.77 5.1-25 35.74v1.18l-1.14-0.32A35.31 35.31 0 0 0 473 480z"
              fill="#d81e06"
              p-id="2941"
            ></path>
            <path
              d="M515.21 520.5m-31.81 0a31.81 31.81 0 1 0 63.62 0 31.81 31.81 0 1 0-63.62 0Z"
              fill="#d81e06"
              p-id="2942"
            ></path></svg
          >动态
        </li>
        <li>
          <svg
            t="1668242428915"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8326"
            width="30"
            height="30"
          >
            <path
              d="M513.252 226.435l-48.5-48.5"
              fill="#1296db"
              p-id="8327"
            ></path>
            <path
              d="M513.251 230.435a3.994 3.994 0 0 1-2.829-1.171l-48.5-48.5a4 4 0 0 1 5.657-5.657l48.5 48.5a4 4 0 0 1-2.828 6.828z"
              fill="#1296db"
              p-id="8328"
            ></path>
            <path
              d="M507.898 230.78l70.75-70.75"
              fill="#1296db"
              p-id="8329"
            ></path>
            <path
              d="M507.898 234.78a4 4 0 0 1-2.829-6.828l70.75-70.75a4 4 0 0 1 5.657 5.657l-70.75 70.75a3.99 3.99 0 0 1-2.828 1.171z"
              fill="#1296db"
              p-id="8330"
            ></path>
            <path
              d="M512.066 276.277m-51 0a51 51 0 1 0 102 0 51 51 0 1 0-102 0Z"
              fill="#1296db"
              p-id="8331"
            ></path>
            <path
              d="M512.066 331.277c-30.327 0-55-24.673-55-55s24.673-55 55-55 55 24.673 55 55-24.673 55-55 55z m0-102c-25.916 0-47 21.084-47 47s21.084 47 47 47 47-21.084 47-47-21.084-47-47-47z"
              fill="#1296db"
              p-id="8332"
            ></path>
            <path
              d="M876.066 769.352h-728c-11.046 0-20-8.954-20-20v-472c0-11.046 8.954-20 20-20h728c11.046 0 20 8.954 20 20v472c0 11.046-8.954 20-20 20z"
              fill="#1296db"
              p-id="8333"
            ></path>
            <path
              d="M876.066 773.352h-728c-13.234 0-24-10.766-24-24v-472c0-13.233 10.766-24 24-24h728c13.233 0 24 10.767 24 24v472c0 13.234-10.766 24-24 24z m-728-512c-8.822 0-16 7.178-16 16v472c0 8.822 7.178 16 16 16h728c8.822 0 16-7.178 16-16v-472c0-8.822-7.178-16-16-16h-728z"
              fill="#1296db"
              p-id="8334"
            ></path>
            <path
              d="M684.116 705.277H212.115c-11.046 0-20-8.954-20-20V341.276c0-11.046 8.954-20 20-20h472.001c11.046 0 20 8.954 20 20v344.001c0 11.046-8.954 20-20 20z"
              fill="#1296db"
              p-id="8335"
            ></path>
            <path
              d="M684.116 709.277H212.115c-13.234 0-24-10.766-24-24V341.276c0-13.234 10.766-24 24-24h472.001c13.234 0 24 10.766 24 24v344.002c0 13.233-10.766 23.999-24 23.999zM212.115 325.276c-8.822 0-16 7.178-16 16v344.002c0 8.822 7.178 16 16 16h472.001c8.822 0 16-7.178 16-16V341.276c0-8.822-7.178-16-16-16H212.115z"
              fill="#1296db"
              p-id="8336"
            ></path>
            <path
              d="M799.116 577.315m-29 0a29 29 0 1 0 58 0 29 29 0 1 0-58 0Z"
              fill="#1296db"
              p-id="8337"
            ></path>
            <path
              d="M799.116 610.315c-18.196 0-33-14.804-33-33s14.804-33 33-33 33 14.804 33 33-14.804 33-33 33z m0-58c-13.785 0-25 11.215-25 25s11.215 25 25 25 25-11.215 25-25-11.215-25-25-25z"
              fill="#1296db"
              p-id="8338"
            ></path>
            <path
              d="M778.421 480.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8339"
            ></path>
            <path
              d="M778.421 486.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8340"
            ></path>
            <path
              d="M792.884 480.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8341"
            ></path>
            <path
              d="M792.884 486.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8342"
            ></path>
            <path
              d="M807.347 480.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8343"
            ></path>
            <path
              d="M807.347 486.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8344"
            ></path>
            <path
              d="M821.81 480.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8345"
            ></path>
            <path
              d="M821.811 486.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8346"
            ></path>
            <path
              d="M778.421 500.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8347"
            ></path>
            <path
              d="M778.421 506.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8348"
            ></path>
            <path
              d="M792.884 500.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8349"
            ></path>
            <path
              d="M792.884 506.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028c0 1.119 0.91 2.028 2.028 2.028s2.028-0.91 2.028-2.028a2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8350"
            ></path>
            <path
              d="M807.347 500.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8351"
            ></path>
            <path
              d="M807.347 506.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8352"
            ></path>
            <path
              d="M821.81 500.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8353"
            ></path>
            <path
              d="M821.811 506.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8354"
            ></path>
            <path
              d="M778.421 460.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8355"
            ></path>
            <path
              d="M778.421 466.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8356"
            ></path>
            <path
              d="M792.884 460.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8357"
            ></path>
            <path
              d="M792.884 466.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028c0 1.119 0.91 2.028 2.028 2.028s2.028-0.91 2.028-2.028a2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8358"
            ></path>
            <path
              d="M807.347 460.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8359"
            ></path>
            <path
              d="M807.347 466.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8360"
            ></path>
            <path
              d="M821.81 460.276m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8361"
            ></path>
            <path
              d="M821.811 466.248c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8a2.03 2.03 0 0 0-2.028 2.028 2.03 2.03 0 0 0 2.028 2.028 2.03 2.03 0 0 0 2.028-2.028 2.03 2.03 0 0 0-2.028-2.028z"
              fill="#1296db"
              p-id="8362"
            ></path>
            <path
              d="M778.421 440.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8363"
            ></path>
            <path
              d="M778.421 446.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8364"
            ></path>
            <path
              d="M792.884 440.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8365"
            ></path>
            <path
              d="M792.884 446.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8366"
            ></path>
            <path
              d="M807.347 440.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8367"
            ></path>
            <path
              d="M807.347 446.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8368"
            ></path>
            <path
              d="M821.81 440.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8369"
            ></path>
            <path
              d="M821.811 446.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8370"
            ></path>
            <path
              d="M778.421 420.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8371"
            ></path>
            <path
              d="M778.421 426.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8372"
            ></path>
            <path
              d="M792.884 420.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8373"
            ></path>
            <path
              d="M792.884 426.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8374"
            ></path>
            <path
              d="M807.347 420.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8375"
            ></path>
            <path
              d="M807.347 426.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8376"
            ></path>
            <path
              d="M821.81 420.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8377"
            ></path>
            <path
              d="M821.811 426.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8378"
            ></path>
            <path
              d="M778.421 400.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8379"
            ></path>
            <path
              d="M778.421 406.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8380"
            ></path>
            <path
              d="M792.884 400.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8381"
            ></path>
            <path
              d="M792.884 406.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8382"
            ></path>
            <path
              d="M807.347 400.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8383"
            ></path>
            <path
              d="M807.347 406.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8384"
            ></path>
            <path
              d="M821.81 400.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8385"
            ></path>
            <path
              d="M821.811 406.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8386"
            ></path>
            <path
              d="M778.421 380.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8387"
            ></path>
            <path
              d="M778.421 386.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8388"
            ></path>
            <path
              d="M792.884 380.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8389"
            ></path>
            <path
              d="M792.884 386.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8390"
            ></path>
            <path
              d="M807.347 380.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8391"
            ></path>
            <path
              d="M807.347 386.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8392"
            ></path>
            <path
              d="M821.81 380.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8393"
            ></path>
            <path
              d="M821.811 386.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8394"
            ></path>
            <path
              d="M778.421 360.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8395"
            ></path>
            <path
              d="M778.421 366.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8396"
            ></path>
            <path
              d="M792.884 360.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8397"
            ></path>
            <path
              d="M792.884 366.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028 2.028-0.91 2.028-2.028-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8398"
            ></path>
            <path
              d="M807.347 360.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8399"
            ></path>
            <path
              d="M807.347 366.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.118 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.119 0 2.028-0.91 2.028-2.028s-0.909-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8400"
            ></path>
            <path
              d="M821.81 360.352m-1.972 0a1.972 1.972 0 1 0 3.944 0 1.972 1.972 0 1 0-3.944 0Z"
              fill="#1296db"
              p-id="8401"
            ></path>
            <path
              d="M821.811 366.324c-3.293 0-5.972-2.679-5.972-5.972s2.679-5.972 5.972-5.972 5.972 2.679 5.972 5.972-2.679 5.972-5.972 5.972z m0-8c-1.119 0-2.028 0.91-2.028 2.028s0.91 2.028 2.028 2.028c1.118 0 2.028-0.91 2.028-2.028s-0.91-2.028-2.028-2.028z"
              fill="#1296db"
              p-id="8402"
            ></path>
            <path
              d="M245.518 463.776a4 4 0 0 1-2.829-6.828l63.25-63.25a4 4 0 0 1 5.657 5.657l-63.25 63.25a3.99 3.99 0 0 1-2.828 1.171zM252.518 540.276a4 4 0 0 1-2.829-6.828l134-134a4 4 0 0 1 5.657 5.657l-134 134a3.99 3.99 0 0 1-2.828 1.171z"
              fill="#1296db"
              p-id="8403"
            ></path>
            <path
              d="M256.115 833.276h128.001"
              fill="#1296db"
              p-id="8404"
            ></path>
            <path
              d="M384.116 837.276H256.115a4 4 0 0 1 0-8h128.001a4 4 0 0 1 0 8z"
              fill="#1296db"
              p-id="8405"
            ></path>
            <path
              d="M640.017 833.276h128.001"
              fill="#1296db"
              p-id="8406"
            ></path>
            <path
              d="M768.018 837.276H640.017a4 4 0 0 1 0-8h128.001a4 4 0 0 1 0 8z"
              fill="#1296db"
              p-id="8407"
            ></path></svg
          >投稿
        </li>
        <li>
          <svg
            t="1668242525730"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="13333"
            width="30"
            height="30"
          >
            <path
              d="M885.76 919.552H116.736C53.248 919.552 1.024 867.328 1.024 803.84V284.672c0-63.488 52.224-115.712 115.712-115.712h769.024c63.488 0 115.712 52.224 115.712 115.712v519.168c0 63.488-52.224 115.712-115.712 115.712zM116.736 226.304c-31.744 0-58.368 25.6-58.368 58.368v519.168c0 31.744 25.6 58.368 58.368 58.368h769.024c31.744 0 58.368-25.6 58.368-58.368V284.672c0-31.744-25.6-58.368-58.368-58.368H116.736z"
              fill="#1296db"
              p-id="13334"
            ></path>
            <path
              d="M432.128 740.352c-15.36 0-30.72-4.096-44.032-12.288-25.6-15.36-40.96-43.008-40.96-72.704V458.752c0-30.72 15.36-57.344 40.96-72.704s57.344-16.384 83.968-2.048L658.432 481.28c27.648 14.336 46.08 44.032 46.08 75.776 0 31.744-17.408 60.416-46.08 75.776l-185.344 98.304c-13.312 6.144-26.624 9.216-40.96 9.216z m1.024-279.552v191.488l182.272-96.256L433.152 460.8z m184.32 97.28l20.48-37.888-20.48 37.888z"
              fill="#1296db"
              p-id="13335"
            ></path></svg
          >合集和列表
        </li>
        <li>
          <svg
            t="1668242566694"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="14300"
            width="30"
            height="30"
          >
            <path
              d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
              p-id="14301"
              fill="#f4ea2a"
            ></path></svg
          >收藏
        </li>
        <li>
          <svg
            t="1668242640613"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="16314"
            width="30"
            height="30"
          >
            <path
              d="M892.543016 224.150106c-9.284457-11.914354-17.804505-21.814842-26.454512-30.930453C759.437485 80.827887 642.682341 92.003414 536.033369 176.799682c-9.493212 7.547907-18.453281 15.383362-26.88737 23.346731-8.43409-7.963369-17.395182-15.798824-26.888394-23.346731C375.608633 92.003414 258.853489 80.827887 152.202471 193.21863c-8.650007 9.115612-17.170055 19.016099-25.559119 29.714765C-2.680039 410.134984 68.411089 595.897805 259.728416 764.030084c42.320874 37.192064 87.560218 70.64906 132.799562 99.905384 15.841803 10.245342 30.570249 19.244296 43.816948 26.932396 8.024767 4.657067 13.827937 7.872295 17.044188 9.578146 4.869914 2.916423 9.728572 5.142114 14.530948 6.771217 3.470031 1.619894 7.516184 3.091408 12.218276 4.387937 25.377994 6.998391 62.97938 1.908466 85.839017-11.764951 2.14178-1.101077 7.944949-4.315282 15.969717-8.972349 13.246699-7.688099 27.974122-16.687054 43.816948-26.932396 45.239344-29.256324 90.478687-62.71332 132.799562-99.905384C949.879885 595.897805 1020.971014 410.134984 892.543016 224.150106z"
              p-id="16315"
              fill="#d81e06"
            ></path></svg
          >订阅
        </li>
        <li>
          <svg
            t="1668242743980"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="17784"
            width="30"
            height="30"
          >
            <path
              d="M951.7 428.8c-0.2-1.8-0.4-3.3-0.7-4.2v-0.8l-0.4-2.2c-7.1-34.6-30-56.9-58.5-56.9h-4.7c-48.6 0-88-39.6-88-88 0-11.2 5.2-27.1 7.4-32.7 13.8-32.2-0.9-68.9-35-87.6L664.5 95.7l-2-0.7c-8-2.6-17.3-5.7-27.7-5.7-19.4 0-41.2 9-54.7 22.5-16.9 16.7-51.2 41.6-71.6 41.6-20.3 0-54.7-24.8-71.6-41.6-14.4-14.2-34.3-22.5-54.7-22.5-10.7 0-19.7 3-27.7 5.7l-1.8 0.7-112.5 60.9-0.7 0.4c-27.3 17.1-38.4 56.3-24.5 87.4l0.2 0.4 0.2 0.4c2.2 4.9 9 21.5 9 36 0 48.6-39.6 88-88 88h-4.7c-29.8 0-52.1 22-58.5 57.3l-0.4 2v0.7c0 1-0.4 2.4-0.7 4.2-2.5 15.1-8.5 50.7-8.5 79.8 0 29.1 5.9 64.7 8.5 79.8 0.2 1.8 0.4 3.3 0.7 4.2v0.8l0.4 2.2c7.1 34.6 30 56.9 58.5 56.9h2.4c48.6 0 88 39.6 88 88 0 11.2-5.2 27.1-7.4 32.7-13.3 30.3-0.7 69.2 28.7 88.8l0.8 0.4 106 59 2 0.7c8 2.6 17.1 5.7 27.5 5.7 22.2 0 42.2-8.5 54.7-22.5 1.2-0.9 2.4-2.1 3.8-3.3 12.8-11.2 47.2-40.8 69.9-40.8 16.9 0 45.2 17.7 73.7 46.2 14.4 14.2 34.3 22.5 54.7 22.5 13.8 0 24-3.8 35.6-9.5l0.4-0.2 108.7-60.1 0.4-0.4c27.3-17.1 38.4-56.3 24.5-87.4l-0.2-0.4-0.2-0.4c-0.2-0.1-8.7-17.8-7.1-33.7l0.2-1v-1c0-48.6 39.6-88 88-88h5c29.8 0 52.1-22 58.5-57.3l0.4-2v-0.7c0.2-0.8 0.4-2 0.7-3.6 2.6-14.7 8.6-49 8.6-80.4 0.2-29-5.7-64.5-8.3-79.6z m-440 222.4c-76.9 0-139.2-62.3-139.2-139.2s62.3-139.2 139.2-139.2S650.9 435.1 650.9 512s-62.3 139.2-139.2 139.2z"
              fill="#1296db"
              p-id="17785"
            ></path></svg
          >设置
        </li>
        <li>
          <input
            type="text"
            class="nav-input"
            placeholder="搜索视频、动态"
          /><svg
            @mouseenter="isActive = true"
            @mouseleave="isActive = false"
            :class="{ 'search-svg': true, 'active-blue': isActive }"
            data-v-12835cef=""
            width="17"
            height="17"
            viewBox="0 0 17 17"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              data-v-12835cef=""
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M16.3451 15.2003C16.6377 15.4915 16.4752 15.772 16.1934 16.0632C16.15 16.1279 16.0958 16.1818 16.0525 16.2249C15.7707 16.473 15.4456 16.624 15.1854 16.3652L11.6848 12.8815C10.4709 13.8198 8.97529 14.3267 7.44714 14.3267C3.62134 14.3267 0.5 11.2314 0.5 7.41337C0.5 3.60616 3.6105 0.5 7.44714 0.5C11.2729 0.5 14.3943 3.59538 14.3943 7.41337C14.3943 8.98802 13.8524 10.5087 12.8661 11.7383L16.3451 15.2003ZM2.13647 7.4026C2.13647 10.3146 4.52083 12.6766 7.43624 12.6766C10.3517 12.6766 12.736 10.3146 12.736 7.4026C12.736 4.49058 10.3517 2.1286 7.43624 2.1286C4.50999 2.1286 2.13647 4.50136 2.13647 7.4026Z"
              fill="currentColor"
            ></path>
          </svg>
        </li>
      </ul>
      <ul class="ul-right">
        <li>关注数<span>21</span></li>
        <li>粉丝数<span>21</span></li>
        <li>获赞数<span>21</span></li>
        <li>播放数<span>21</span></li>
        <li>阅读数<span>21</span></li>
      </ul>
    </div>
    <div class="login-center-container-content">
      <div class="container-left">
        <ul class="ul-top">
          <li class="fans-view-active">我的粉丝会看到</li>
          <li>新访客会看到</li>
        </ul>
        <ul class="ul-bottom">
          <li class="set-top-video">
            <div class="upload">+<span>设置置顶视频</span></div>
            <div
              style="
                width: 288px;
                height: 139px;
                background-image: url('');
              "
            ></div>
          </li>
          <li class="my-video">
            我的视频<span>还没有上传过视频哦~ <i>立即上传</i></span>
          </li>
          <li class="my-video">我的合集和视频列表</li>
          <li class="my-video">我的收藏夹</li>
          <li class="my-video">订阅番剧</li>
          <li class="my-video">最近投币的视频</li>
          <li class="my-video">最近点赞的视频</li>
        </ul>
      </div>
      <div class="container-right">
        <div class="section">
          <div class="row user-auth no-auth">
            <img
              src="//s1.hdslb.com/bfs/static/jinkela/space/assets/icon-auth.png"
              alt="获得 bilibili 认证，享受多重认证福利！"
              class="icon-auth"
            />
            <div class="no-auth-title">
              <a
                href="//account.bilibili.com/account/official/home"
                title="点此申请 bilibili 认证"
                target="_blank"
                class="goto-auth"
                >点此申请 bilibili 认证<em class="icon i-m-ra"></em></a
              ><span>获得 bilibili 认证，享受多重认证福利！</span>
            </div>
          </div>
        </div>
        <div class="create-center">
          <div class="img-icon">
            <img
              src="https://s1.hdslb.com/bfs/static/jinkela/space/assets/icon_createCenters.png"
              alt=""
            />
            <div class="icon-next"></div>
          </div>
          <div class="create-center-button">
            <a style="border-right: 1px solid #ccc; padding-right: 80px;">视频投稿</a>
            <a>内容管理</a>
          </div>
        </div>
        <div class="annunciate">
          <div>公告</div>
          <textarea name="" id="" cols="50" rows="10" placeholder="编辑我的空间公告"></textarea>
        </div>
        <div class="person-info">
          <div class="fix-info">个人资料<span>修改资料</span></div>
          <div class="UID">
            <div><span>UID</span>632783758</div>
            <div><span>生日</span><span>04-03</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoginCenter",
  data() {
    return {
      isShow: true,
      content: "从黎明到黄昏，阳光充足，胜过一切过去的诗",
      isActive: false,
    };
  },
  methods: {},
  watch: {
    isShow: {
      handler() {
        this.$nextTick(() => {
          this.$refs.signInput.focus();
        });
      },
    },
  },
};
</script>
<style scoped>
.login-center-container {
  width: 100%;
  height: 100%;
  background-color: #f4f5f7;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.h-inner {
  width: 80%;
  height: 200px;
  background-image: url("./images/bgc-img.webp");
  display: flex;
  flex-direction: column-reverse;
  min-width: 1180px;
}
.login-center-header-mask {
  width: 100%;
  height: 76px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.1);
  padding-left: 20px;
  display: flex;
  min-width: 1180px;
}
.avatarImg {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  background-color: #000;
}
.user-info {
  width: 60%;
  height: 64px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.user-info-top {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.normal-medal {
  display: flex;
  color: #fff;
}
.normal-left {
  width: 16px;
  height: 100%;
  background: #99a2aa;
  box-sizing: border-box;
  border-radius: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.normal-right {
  background-color: #333;
}

.h-basic-spacing {
  width: 100%;
  height: 30px;
}

.space_input {
  width: 100%;
  height: 30px;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
}
.h-basic-spacing {
  display: flex;
  align-items: center;
}

.nav {
  width: 80%;
  display: flex;
  background-color: #fff;
  min-width: 1180px;
}
.nav ul {
  display: flex;
}
.ul-left {
  width: 70%;
}
.ul-left li {
  display: flex;
  margin: 10px 15px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 5px solid #fff;
}
.ul-left li:hover {
  color: #00aeec;
}
.ul-left li:first-child {
  color: #00aeec;
}
.ul-left li:last-child {
  position: relative;
  border: none;
}
.nav-input {
  outline: none;
  border: 1px solid #ccd0d7;
  color: #222;
  height: 30px;
  width: 134px;
  padding: 0 30px 0 10px;
  font-size: 12px;
  line-height: 30px;
  border-radius: 15px;
  box-sizing: border-box;
}
.search-svg {
  position: absolute;
  left: 110px;
}
.active-blue {
  color: #00aeec;
}

.ul-right {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}
.ul-right li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #99a2aa;
}
.ul-right li span {
  color: #222;
}

.login-center-container-content {
  width: 80%;
  margin-top: 10px;
  box-sizing: border-box;
  min-width: 1180px;
  display: flex;
}

.login-center-container-content ul {
  width: 100%;
}
.ul-top {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.ul-top li {
  margin-right: 30px;
  display: block;
  text-align: center;
  line-height: 24px;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.fans-view-active {
  border-bottom: 1px solid #00aeec;
  color: #00aeec;
}

.container-left {
  width: 65%;
  background-color: #fff;
  padding: 20px;
}

.container-right {
  flex: 1;
  margin-left: 1%;
}
.ul-bottom li {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.upload {
  width: 276px;
  height: 171px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 70px;
  color: #ccc;
}
.upload span {
  font-size: 14px;
}
.set-top-video {
  display: flex;
  align-items: center;
  height: 175px;
}
.my-video {
  font-size: 20px;
  font-weight: 400;
}

.my-video span {
  margin-left: 35%;
  color: #99a2aa;
  font-size: 12px;
}
.ul-bottom li i {
  margin-left: 5%;
  color: #00aeec;
}

.ul-right li:hover,
.ul-right li:hover span {
  color: #00aeec;
}

.section {
  height: 70px;
  background-color: #fff;
}
.user-auth {
  display: flex;
  align-items: center;
}
.user-auth img {
  width: 100px;
  height: 70px;
}
.no-auth-title {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.goto-auth {
  font-size: 18px;
  margin-bottom: 5px;
  width: 100%;
}
.no-auth-title span {
  color: #99a2aa;
}
.create-center {
  background-color: #fff;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.create-center img {
  height: 34px;
  width: 120px;
}
.icon-next {
  width: 28px;
  height: 28px;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
.img-icon{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-center-button{
  margin: 20px;
  display: flex;
  justify-content: space-evenly;
  font-size: 13px;
  padding: 15px;
  border: 1px solid #ccc;
}
.annunciate{
  padding: 20px;
  margin-top: 15px;
  background-color: #fff;
}

.annunciate div{
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

.annunciate textarea{
  border: none;
  outline: none;
  margin-top: 10px;
  padding: 10px;
  border:1px solid #fff;
  resize: none;
}

.annunciate textarea:focus{
  border: 1px solid #00aeec;
  padding: 10px;
}

.person-info{
  padding: 20px;
  background-color: #fff;
  margin-top: 15px;
}

.fix-info{
  display: flex;
  padding: 10px 0;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.fix-info span{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  font-size: 12px;
}

.UID{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.UID div{
  width: 50%;
}
.UID div span{
  padding-right: 5px;
}
</style>
